<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-button type="primary" @click="showAddDialog">添加分类</el-button>
        </el-col>
      </el-row>
      <!-- tree-table树形表格 -->
      <tree-table class="tree-table" :data="cateList" :columns="columns" :selection-type="false" show-index
        :expand-type="false">
        <!-- 是否有效 -->
        <template slot="isOk" slot-scope="scope">
          <i class="el-icon-error" style="color:red;" v-if="scope.row.cate_deleted"></i>
          <i class="el-icon-success" style="color:lightgreen;" v-else></i>
        </template>
        <!-- 排序 -->
        <template slot="order" slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.cat_level==0">一级</el-tag>
          <el-tag size="mini" type="success" v-else-if="scope.row.cat_level==1">二级</el-tag>
          <el-tag size="mini" type="warning" v-else>三级</el-tag>
        </template>
        <!-- 操作 -->
        <template slot="operate" slot-scope="scope">
          <el-button size="mini" type="primary" class="el-icon-edit">编辑</el-button>
          <el-button size="mini" type="danger" class="el-icon-delete">删除</el-button>
        </template>
      </tree-table>
    </el-card>
    <!-- 添加 -->
    <el-dialog title="添加分类" :visible.sync="addDialogVisible" width="50%">
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRel" label-width="100px">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <el-cascader v-model="selectedKeys" :options="parentCateList" :props="cascaderProps" @change="handleChange" clearable>
          </el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCate">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
export default {
	data() {
		return {
			queryInfo: {
				type: 3,
				pagenum: 1,
				pagesize: 5,
			},
			cateList: [],
			total: 0,
			// tree-table列的定义
			columns: [
				{
					label: '分类名称',
					prop: 'cat_name',
				},
				{
					label: '是否有效',
					// 将当前列定义为模板列
					type: 'template',
					// 当前列使用的模板
					template: 'isOk',
				},
				{
					label: '排序',
					// 将当前列定义为模板列
					type: 'template',
					// 当前列使用的模板
					template: 'order',
				},
				{
					label: '操作',
					// 将当前列定义为模板列
					type: 'template',
					// 当前列使用的模板
					template: 'operate',
				},
			],
			addDialogVisible: false,
			addForm: {
                cat_name: '',
                cat_pid:0,
                cat_level:0
			},
            addFormRules: {},
            parentCateList:[],
            cascaderProps:{
                 expandTrigger: 'hover',
                 label:'cat_name',
                 value:'cat_id',
                 checkStrictly:true,
            },
            selectedKeys:[]
		}
	},
	created() {
		this.getCateList()
	},
	methods: {
		async getCateList() {
			// 获取分类列表数据
			const { data: res } = await this.$http.get('categories', {
				params: this.queryInfo,
			})
			if (res.meta.status !== 200) {
				return this.$message.error('获取商品分类失败！')
			}
			this.cateList = res.data.result
			this.total = res.data.total
        },
        async showAddDialog(){
            this.addDialogVisible = true 
            const {data:res} = await this.$http.get('categories',{
                params:{
                    type:2
                }
            })
            this.parentCateList = res.data
            console.log(this.parentCateList)
        },
        handleChange(){
            // 判断是否选择了父级分类
            if(this.selectedKeys.length > 0){
                // 父级分类的id
                this.addForm.cat_pid = this.selectedKeys[this.selectedKeys.length-1]
                // 分类层级
                this.addForm.cat_level = this.selectedKeys.length
            }else{
                this.addForm.cat_pid = 0
                this.addForm.cat_level = 0
            }
        },
        async addCate(){
            const {data:res} = await this.$http.post('categories',this.addForm)
            console.log(res)
        }
	},
}
</script>

<style lang="less" scoped>
.tree-table {
	margin-top: 15px;
}
</style>